<template>
  <div>
    <a-form
      :form="form"
      @submit.prevent="onSubmit"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="行业名称">
        <a-input
          placeholder="请输入行业名称"
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请输入行业名称' }],
              validateTrigger: 'blur',
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="宣传语1">
        <a-input
          placeholder="请输入宣传语1"
          v-decorator="[
            'propagate1',
            {
              rules: [
                { required: true, message: '请输入宣传语1' },
                { validator: validatePropagate },
              ],
              validateTrigger: 'blur',
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="宣传语2">
        <a-input
          placeholder="请输入宣传语2"
          v-decorator="[
            'propagate2',
            {
              rules: [
                { required: true, message: '请输入宣传语2' },
                { validator: validatePropagate },
              ],
              validateTrigger: 'blur',
            },
          ]"
        />
        <!-- <a-input placeholder="请输入宣传语2" v-decorator="[
                    'propagate2',
                    {
                        rules: [
                            { validator: (rule, val, callback) => {
                                console.log(val)
                                if(!val){
                                    callback('请输入宣传语2');
                                }
                                if(val.length > 9){
                                    callback('请勿超过9个字');
                                }
                                callback()
                            }}
                        ]a
                    }
                ]"/> -->
      </a-form-item>
      <!-- <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入排序" v-decorator="[
                    'sort',
                    {
                        rules: [
                            { validator: (rule, val, callback) => {
                                if(!val){
                                    callback('请输入排序');
                                }
                                callback()
                            }}
                        ]
                    }
                ]"/>
            </a-form-item> -->
      <!-- <a-form-item label="对应巡检" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                    show-search
                    mode="multiple"
                    style="width: 100%"
                    placeholder="请选择对应巡检"
                    :filterOption="handleFilterOption"
                    v-decorator="['inspections']"
                >
                    <a-select-option :name="inspect.name" :value="inspect.id" v-for="inspect in inspectList" :key="inspect.id">
                        {{ inspect.name }}
                    </a-select-option>
                </a-select>
            </a-form-item> -->
      <a-form-item label="图片">
        <div class="img-wrap">
         <div class="upload-show">
              <img
            v-if="image"
            :src="image"
            width="100"
            height="100"
            style="display: block"
          />
         </div>
          <div class="upload-text">
            <a-upload
              name="file"
              :showUploadList="false"
              :multiple="false"
              :customRequest="this.handleUploadImage"
            >
              <span>上传</span>
            </a-upload>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="视频">
           <div class="img-wrap">
         <div class="upload-show">
              <video
          v-if="video"
          :src="video"
          width="100"
          height="100"
          controls="controls"
          style="display: block"
        >
          您的浏览器不支持 video 标签。
        </video>
         </div>
          <div class="upload-text">
            
        <a-upload
          name="file"
          :showUploadList="false"
          :multiple="false"
          :customRequest="this.handleUploadVideo"
        >
         <span>上传</span>
        </a-upload>
          </div>
        </div>
       
      </a-form-item>
    
    </a-form>
  </div>
</template>

<script>
import config from "@/api/config";

export default {
  name: "check-create",
  data() {
    return {
      form: this.$form.createForm(this),
      inspectList: [],
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      video: "",
      image: "",
    };
  },
  methods: {
    validatePropagate(rule, val, callback) {
      if (val.length > 9) {
        callback("请勿超过9个字");
      } else {
        callback();
      }
    },
    onSubmit(form) {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log("values:", values, this.url);
          values.image = this.image;
          values.video = this.video;
          values.sort = this.$route.params.sort;
          let { status, message } = await this.http(
            "post",
            "/industry/create",
            values
          );
          if (status === 1) {
            this.$message.success("创建成功", 1);
            this.$router.push("/industry");
            this.$emit("close")
          } else {
            this.$message.error(message, 1);
          }
          
          // if(resp && resp.status === 200){
          //     this.$message.success(resp.msg, 1);
          //     this.$router.push('/industry')
          // }else{
          //     this.$message.error(resp.msg, 1);
          // }
        }
      });
    },
    // async getInspectList(){
    //     let resp = await this.http(
    //         "get",
    //         "/inspection/index",
    //         {
    //             page: 1,
    //             // page_size: 10000
    //         }
    //     );
    //     this.inspectList = resp && resp.data
    // },
    async handleUploadVideo(args) {
      let params = new FormData();
      params.append("uploadFile", args.file);
      let {
        data: { filePath },
      } = await this.http("post", config.uploadURL, params);
      this.video = filePath;
      return args.onSuccess({ code: 200 }, args.file);
    },
    async handleUploadImage(args) {
      let params = new FormData();
      params.append("uploadFile", args.file);
      let {
        data: { filePath },
      } = await this.http("post", config.uploadURL, params);
      this.image = filePath;
      return args.onSuccess({ code: 200 }, args.file);
    },
    handleFilterOption(inputValue, option) {
      return option.data.attrs.name.indexOf(inputValue) !== -1;
    },
    
  },
  mounted() {
    // this.getInspectList()
  },
  created(){
      console.log(123)
  }
  
};
</script>

<style lang="scss" scoped>
.img-wrap {
  display: flex;
  justify-content: space-between;
  .upload-text {
    flex: 1;
    cursor: pointer;
    span{
        color: #138EFF !important;
    }
  }
  .upload-show{
      flex: 5;
  }
}
</style>